<template>
	<!-- 客户资源 -->
	<view class="page-two-list page-two-list-khzy">
		<!-- 广告位 -->
		<view class="advertising">
			<swiper class="ad-swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item, index) in advertising" :key="index">
					<image :src="item" mode="scaleToFill" style="width: 100%;"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="page-two-main">
			<view class="khzy-tip">
				<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/xqgc_bg_small.png"
					mode="widthFix"></image>
				<text>需求广场内需求由个人/渠道方发布，请仔细辨别信息真伪！</text>
			</view>
			<!-- 筛选 -->
			<view class="filter-bar">
				<view class="filter-bar-right" style="margin-left: 0;" :class="{ 'filter-bar-right-focus': isFocus }">
					<input class="filter-input" placeholder="请输入搜索内容" @focus="handleFocus" @blur="handleBlur"
						v-model="searchQuery" @change="handleSearch" />
					<image class="search-icon" src="/static/images/search_icon.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- 下拉刷新容器 -->
			<scroll-view 
				class="scroll-container" 
				scroll-y="true" 
				refresher-enabled="true"
				:refresher-triggered="refreshing"
				@refresherrefresh="onRefresh"
				@scrolltolower="onLoadMore"
			>
				<!-- 添加加载动画 -->
				<uni-load-more v-if="loading && pageNum === 1" status="loading"></uni-load-more>
				
				<view v-if="!loading && khzyData.length > 0" class="content">
					<!-- 客户资源列表 -->
					<khzy v-if="!loading && khzyData.length > 0" :khzyData="khzyData" isTextVisible="true"></khzy>
				</view>

				<!-- 暂无数据显示 -->
				<view class="zwxx-img" v-if="!loading && khzyData.length === 0 && pageNum === 1">
					<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/zwxx.png" mode="widthFix">
					</image>
					<view>暂无数据</view>
				</view>
				
				<!-- 加载更多状态 -->
				<uni-load-more 
					v-if="khzyData.length > 0" 
					:status="loadMoreStatus"
					:content-text="loadMoreText"
				></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Khzy from '../../components/Khzy.vue'; // 客户资源
	export default {
		components: {
			Khzy
		},
		data() {
			return {
				loading: false, // 添加loading状态
				refreshing: false, // 下拉刷新状态
				searchQuery: '', // 搜索内容
				advertising: [],
				// 客户资源
				khzyData: [],
				// 分页相关
				pageNum: 1, // 当前页码
				pageSize: 5, // 每页数据量
				hasMore: true, // 是否还有更多数据
				loadMoreStatus: 'more', // 加载更多状态：more-加载前、loading-加载中、noMore-没有更多了
				// 搜索相关
				searchTimer: null, // 搜索防抖定时器
				isSearching: false, // 是否正在搜索
				isFocus: false // 搜索框聚焦状态
			}
		},
		computed: {
			loadMoreText() {
				return {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad() {
			this.getKf() // 获取客户列表
			this.getBannerList() // 获取广告位
		},
		onReady() {
		
		},
		methods: {
			// 获取广告位
			async getBannerList() {
				const res = await this.$api.getBannerList()
				if (res.succ) {
					// 查找zsggw等于"需求广场"的项
					const targetBanner = res.data.find(item => item.zsggw === '需求广场')
					// 如果找到匹配项，则使用其tpList值，否则保持默认值
					this.advertising = targetBanner ? targetBanner.tpList : ['https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/banner1.png']
				}
			},
			
			// 获取客户列表
			async getKf(isLoadMore = false) {
				if (isLoadMore) {
					this.loadMoreStatus = 'loading'
				} else {
					this.loading = true
				}
				
				try {
					let data = {
						words: this.searchQuery || '', // 搜索关键词
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}
					
					const res = await this.$api.getKfList(data)
					console.log('客户列表', res)
					
					if (res.succ) {
						const newData = res.data.filter(item => {
							if (!item || !item.member) {
								return false;
							}
							return item.releaseStatus === '展示中' || item.releaseStatus === '已成交';
						})
						
						if (isLoadMore) {
							// 加载更多：追加数据
							this.khzyData = [...this.khzyData, ...newData]
						} else {
							// 首次加载或刷新：替换数据
							this.khzyData = newData
						}
						
						// 判断是否还有更多数据
						this.hasMore = newData.length === this.pageSize
						this.loadMoreStatus = this.hasMore ? 'more' : 'noMore'
					}
				} catch (error) {
					console.error('获取客户列表失败:', error)
					this.loadMoreStatus = 'more'
				} finally {
					this.loading = false
					this.refreshing = false
				}
			},
			
			// 下拉刷新
			async onRefresh() {
				this.refreshing = true
				this.pageNum = 1
				this.hasMore = true
				this.loadMoreStatus = 'more'
				await this.getKf()
			},
			
			// 加载更多
			async onLoadMore() {
				if (!this.hasMore || this.loadMoreStatus === 'loading') {
					return
				}
				
				this.pageNum++
				await this.getKf(true)
			},
			
			// 搜索处理（带防抖）
			handleSearch() {
				// 清除之前的定时器
				if (this.searchTimer) {
					clearTimeout(this.searchTimer)
				}
				
				// 设置新的定时器，500ms后执行搜索
				this.searchTimer = setTimeout(() => {
					this.performSearch()
				}, 500)
			},
			
			// 执行搜索
			async performSearch() {
				if (this.isSearching) return
				
				this.isSearching = true
				this.pageNum = 1
				this.hasMore = true
				this.loadMoreStatus = 'more'
				this.khzyData = [] // 清空当前数据
				
				await this.getKf()
				this.isSearching = false
			},
			
			// 搜索框聚焦
			handleFocus() {
				this.isFocus = true;
			},
			
			// 搜索框失焦
			handleBlur() {
				if (!this.searchQuery) {
					this.isFocus = false;
				}
			}
		}
	}
</script>

<style lang="less">
	.page-two-list-khzy {
		.page-two-main{
		}
		.khzy-tip {
			position: relative;
			height: 80rpx;
			margin: 20rpx 30rpx;

			image {
				width: 100%;
				height: 100%;
			}

			text {
				position: absolute;
				left: 0;
				top: 50%;
				width: 100%;
				transform: translateY(-50%);
				color: #FFEFD9;
				font-size: 25rpx;
				text-align: center;
			}
		}

		.filter-bar {
			margin: 30rpx;
		}

		.advertising {
			margin: 30rpx 30rpx 0;
			padding: 0;
			border-radius: 12rpx;

			.ad-swiper {
				width: 100%;
				height: 300rpx;
				border-radius: 12rpx;
			}

			.ad-swiper swiper-item {
				width: 100%;
				height: 100%;
			}

			.ad-swiper swiper-item image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
		
		.scroll-container {
			width: 100%;
			flex: 1;
			overflow: auto;
		}
		
		.zwxx-img {
			text-align: center;
			padding: 100rpx 0;
			
			image {
				width: 200rpx;
				height: 200rpx;
			}
			
			view {
				margin-top: 20rpx;
				color: #999;
				font-size: 28rpx;
			}
		}
	}
</style>